<template>
  <div class="join-team-wrap">
    <div class="join-team-bounced" v-if="openBounced">
      <div class="bounced-title">
        <div>
          <img v-if="joinSucc" src="@/common/image/scc-join-tem.png" alt="">
          <img v-else src="@/common/image/err-join-tem.png" alt="">
        </div>
        <p :class="{'succ-text-col':joinSucc}">{{ joinSucc?"加入成功":"加入失败" }}</p>
      </div>
      <p class="bounced-con">{{ joinSucc?"3秒后将自动跳转到主页": showTextCode }}</p>
    </div>
    <div class="join-team-btn">
      <p>用户&nbsp;
        <span>{{usersInvite?usersInvite:"_"}}</span>&nbsp;
        正在邀请您加入团队&nbsp;
        <span>{{teamInvite?teamInvite:"_"}}</span>&nbsp;，是否确认加入？
      </p>
      <el-button type="primary" @click="joinTeamFun">加入</el-button>
    </div>
  </div>
</template>

<script>
import { addTeamMemberByUrl, checkUrlData } from '@/api/team_list'
import { setTimeout } from 'timers'
import qs from 'qs'

export default {
  data () {
    return {
      // 成功加入
      joinSucc: true,
      // 队长名称
      usersInvite: '',
      // 团队名称
      teamInvite: '',
      // 传入data
      teamData: '',
      // 队伍id
      teamTeamID: '',
      // 队伍成员id
      teamMemberID: '',
      // 弹框显示
      openBounced: false,
      showTextCode: ''
    }
  },
  created () {
    this._checkUrlData()
  },
  methods: {
    // 获取data参数
    getQueryString (name) {
      const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
      const regRewrite = new RegExp('(^|/)' + name + '/([^/]*)(/|$)', 'i')
      const r = window.location.search.substr(1).match(reg)
      const q = window.location.pathname.substr(1).match(regRewrite)
      if (r != null) {
        return unescape(r[2])
      } else if (q != null) {
        return unescape(q[2])
      } else {
        return null
      }
    },
    joinTeamFun () {
      this._addTeamMemberByUrl()
    },
    // 点击确定
    _addTeamMemberByUrl () {
      let data = qs.stringify({
        data: this.teamData,
        userId: this.teamMemberID,
        teamId: this.teamTeamID
      })
      addTeamMemberByUrl(data).then(res => {
        if (res.message.code === 0) {
          this.openBounced = true
          this.joinSucc = true
          setTimeout(() => {
            this.$router.push({ path: '/project/list', query: { reloadbtn: true } })
          }, 3000)
        } else {
          if (res.message.code === 20003) {
            this.showTextCode = '加入团队数量超过限制'
          } else if (res.message.code === 20004) {
            this.showTextCode = '已加入团队'
          } else if (res.message.code === 20008) {
            this.showTextCode = '团队未创建'
          } else if (res.message.code === 20009) {
            this.showTextCode = '链接失效'
          } else if (res.message.code === 20010) {
            this.showTextCode = '邀请链接数据错误'
          }
          this.joinSucc = false
          this.openBounced = true
          setTimeout(() => {
            this.$router.push({ path: '/project/list', query: { reloadbtn: true } })
          }, 3000)
        }
      })
    },
    // 获取链接对应的信息
    _checkUrlData () {
      this.teamData = this.getQueryString('data')
      let data = qs.stringify({
        data: this.teamData
      })
      checkUrlData(data).then(res => {
        if (res.message.code === 0) {
          this.usersInvite = res.data.adminName
          this.teamInvite = res.data.teamName
          this.teamTeamID = res.data.teamId
          this.teamMemberID = res.data.memberId
        } else if (res.message.code === 20009) {
          this.$message({ message: '邀请链接失效', showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.join-team-wrap
  width 100%
  margin 0 auto
  max-width 1162px
  position relative
  text-align center
  .join-team-btn
    display inline-block
    margin 260px auto 0
    p
      font-size 18px
      line-height 30px
      margin-bottom 30px
      span
        color #409EFF
    .el-button
      padding 9px 83px
      font-size 16px
      line-height 22px
  .join-team-bounced
    width 450px
    height 150px
    position absolute
    top 160px
    left 50%
    background #ffffff
    transform translate(-50%, 0)
    box-shadow 0 2px 11px 0 rgba(82,103,160,0.42)
    box-sizing border-box
    padding-top 40px
    .bounced-title
      display flex
      justify-content center
      margin-bottom 24px
      div
        width 20px
        height 20px
        img
          width 100%
          height 100%
      p
        font-size 18px
        line-height 25px
        color #F04848
        margin-left 11px
      .succ-text-col
        color #1EC063
    .bounced-con
      font-size 14px
      line-height 20px
      color #2D323B
      text-align center
</style>
